<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Foundation -->
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/normalize.css" />
<script src="js/vendor/custom.modernizr.js"></script>
<title>Tournoi</title>
</head>
<body class="antialiased">
	<jsp:include page="/administration/inc_testLogin.jsp"></jsp:include>
	<jsp:include page="/inc_menu.jsp"></jsp:include>
	<div class="row">
		<div class="large-9 large-centered columns">
			<div class="row">
				<div class="large-12 columns">
					<h1>Match</h1>
					<c:if test="${match.getArbitre() != null }">
						<h5>Arbitre : ${match.getArbitre().getPrenom()}
							${match.getArbitre().getNom()}</h5>
					</c:if>
					<c:if test="${match.getArbitre() == null }">
						<div class="row">
							<div class="two columns">Arbitre :</div>
							<div class="six columns">
								<select id="ddlArbitres" onchange="ddlArbitreChange()" style="width: 200px;">
									<option value="" selected="selected">---</option>
									<c:if test="${arbitres != null }">
										<c:forEach var="arbitre" items="${arbitres }">
											<option value="${arbitre.getIdPersonne() }">${arbitre.getPrenom()}
												${arbitre.getNom()}</option>
										</c:forEach>
									</c:if>
								</select>
							</div>
						</div>
					</c:if>
					<br></br>
				</div>
				<c:choose>
					<c:when test="${match.etat == 'Prevu' }">
						<div class="large-5 large-centered columns"
							style="text-align: center;">
							<label style="font-weight: 700; font-size: 14pt;">Match
								prévu : </label> <a href="#" class="button small"
								onclick="lancerMatch(${match.getIdMatch() })">Lancer le
								match</a>
						</div>
					</c:when>
					<c:when test="${match.etat == 'EnCours' }">
						<div class="large-5 large-centered columns"
							style="text-align: center;">
							<label style="font-weight: 700; font-size: 14pt;">Match
								en cours : </label> <a href="#" class="button small"
								onclick="terminerMatch(${match.getIdMatch() })">Terminer le
								match</a>
						</div>
					</c:when>
					<c:when test="${match.etat == 'Termine' }">
						<div class="large-5 large-centered columns"
							style="text-align: center;">
							<label style="font-weight: 700; font-size: 14pt;">Match
								terminé </label>
						</div>
					</c:when>
				</c:choose>
				<hr />
				<div class="large-11 large-centered columns">
					<div class="row">
						<!-- Calcul du score total -->
						<c:set var="idEquipe1" value="${match.equipe1.idEquipe }" />
						<c:set var="score1" value="0" />
						<c:set var="score2" value="0" />
						<c:forEach var="but" items="${match.buts }">
							<c:choose>
								<c:when test="${but.auteur.equipe.idEquipe == idEquipe1 }">
									<c:set var="score1" value="${score1 + 1 }" />
								</c:when>
								<c:otherwise>
									<c:set var="score2" value="${score2 + 1 }" />
								</c:otherwise>
							</c:choose>
						</c:forEach>
						<!-- Fin -->
						<c:forEach begin="0" end="1" varStatus="loop">
							<c:set var="equipe"
								value="${loop.index == 0 ? match.equipe1 : match.equipe2 }" />
							<c:set var="align"
								value="${loop.index == 0 ? 'text-align: left;' : 'text-align: right;' }" />
								
							<c:if test="${ match.getIdEquipeGagnante() > -1 }">
								<c:set var="score1Color" value="${ match.getIdEquipeGagnante() == match.getEquipe1().getIdEquipe() ? 'color: green' : 'color: red' }" />
								<c:set var="score2Color" value="${ match.getIdEquipeGagnante() == match.getEquipe2().getIdEquipe() ? 'color: green' : 'color: red' }" />
							</c:if>
							<c:if test="${ match.getIdEquipeGagnante() == -1 }">
								<c:set var="score1Color" value="${ score1 == score2 ? 'color: black;' : (score1 > score2 ? 'color: green;' : 'color: red;') }" />
								<c:set var="score2Color" value="${ score1 == score2 ? 'color: black;' : (score2 > score1 ? 'color: green;' : 'color: red;') }" />
							</c:if>
							<div class="large-5 columns" style="${align}">
								<c:choose>
									<c:when test="${loop.index == 0 }">
										<h3 style="float: left;">${equipe.nom }</h3>
										<h3 style="float: right;${score1Color}">${score1 }</h3>
									</c:when>
									<c:otherwise>
										<h3 style="float: left;${score2Color}">${score2 }</h3>
										<h3 style="float: right;">${equipe.nom }</h3>
									</c:otherwise>
								</c:choose>
								<span style="clear: both;" />
								<hr />
								<div class="row">
									<div class="large-12 columns">
										<c:forEach var="joueur" items="${ equipe.joueurs}"
											varStatus="loop2">
											<div style="height: 30px;">
												<c:choose>
													<c:when test="${loop.index == 0 }">
												${joueur.nom }&nbsp;${joueur.prenom }
												<c:forEach var="but"
															items="${match.listeButsParJoueur(joueur.getIdPersonne()) }">
															<img src="img/soccerball24.png"
																title="${but.getMinute() } min."></img>
														</c:forEach>
													</c:when>
													<c:otherwise>
														<c:forEach var="but"
															items="${match.listeButsParJoueur(joueur.getIdPersonne()) }">
															<img src="img/soccerball24.png"
																title="${but.getMinute() } min."></img>
														</c:forEach>
												${joueur.nom }&nbsp;${joueur.prenom }
									</c:otherwise>
												</c:choose>
											</div>
										</c:forEach>
									</div>
								</div>
							</div>
							<c:if test="${loop.index == 0 }">
								<div class="large-2 columns" style="text-align: center;">
									<h3>VS</h3>
								</div>
							</c:if>
						</c:forEach>
					</div>
					<hr />
					<c:if test="${match.prolongations || match.tirsAuButs}">
						<div class="row">
							<div class="large-12 columns">
								<c:if test="${match.prolongations }">
									<span data-tooltip class="has-tip"
										title="Il y a eu des prolongations">prolongations</span>
								</c:if>
								<c:if test="${match.tirsAuButs }">
									<c:if test="${match.prolongations }">
							&nbsp;/&nbsp;
							</c:if>
									<span data-tooltip class="has-tip"
										title="Il y a eu des tirs au but">tirs au but</span>
								</c:if>
							</div>
						</div>
						<hr />
					</c:if>
					<div class="row">
						<div class="large-12 columns">
							<h3>Buts</h3>
							<c:if test="${ match.etat == 'EnCours'}">
								<div class="large-7 columns" style="width: 100%;">
									<span> <select id="ddlChoixEquipeBut"
										style="width: 160px;" onchange="ddlChoixEquipeButChange();">
											<option value="" selected>--- Equipe ---</option>
											<option value="1">${match.getEquipe1().getNom() }</option>
											<option value="2">${match.getEquipe2().getNom() }</option>
									</select> <select id="ddlChoixJoueurEquipe1But"
										style="width: 180px; display: none;">
											<option value="" selected>--- Joueur ---</option>
											<c:forEach var="joueur"
												items="${match.getEquipe1().getJoueurs() }">
												<option value="${joueur.getIdPersonne() }">${joueur.getNom() }&nbsp;${joueur.getPrenom() }</option>
											</c:forEach>
									</select> <select id="ddlChoixJoueurEquipe2But"
										style="width: 180px; display: none;">
											<option value="" selected>--- Joueur ---</option>
											<c:forEach var="joueur"
												items="${match.getEquipe2().getJoueurs() }">
												<option value="${joueur.getIdPersonne() }">${joueur.getNom() }&nbsp;${joueur.getPrenom() }</option>
											</c:forEach>
									</select> <select id="ddlChoixMinuteBut" style="width: 100px;">
											<option value="" selected>--- Minute ---</option>
											<c:forEach begin="0" end="120" varStatus="loop">
												<option value="${loop.index}">${loop.index}</option>
											</c:forEach>
									</select> <a href="#" class="button small" onclick="ajouterBut()">Inscrire
											but</a>
									</span>
								</div>
							</c:if>
							<c:choose>
								<c:when test="${fn:length(match.buts) > 0}">
									<c:forEach var="but" items="${match.listeButsSorted() }">
										<c:set var="auteur" value="${but.auteur }" />
										<div class="row">
											<c:choose>
												<c:when test="${auteur.equipe.idEquipe == idEquipe1 }">
													<div class="large-7 columns">
														<div class="panel">
															<span style="float: left; text-align: left;">${ but.minute}
																min.</span> <span style="float: right; text-align: right;">${auteur.nom }&nbsp;${auteur.prenom }
																<c:if test="${match.getEtat() == 'EnCours' }">
																	<img src="img/redcross24.png" title="Retirer ce but" style="margin-left: 10px;" onclick="retirerBut(${ but.getIdBut() })"></img>
																</c:if>
															</span>
															<div style="clear: both;"></div>
														</div>
													</div>
												</c:when>
												<c:otherwise>
													<div class="large-5 columns"></div>
													<div class="large-7 columns">
														<div class="panel">
															<span style="float: left; text-align: left;">
																<c:if test="${match.getEtat() == 'EnCours' }">
																	<img src="img/redcross24.png" title="Retirer ce but" style="margin-right: 10px;" onclick="retirerBut(${ but.getIdBut() })"></img>
																</c:if>
																${auteur.nom }&nbsp;${auteur.prenom }
															</span>
															<span style="float: right; text-align: right;">${ but.minute}
																min.</span>
															<div style="clear: both;"></div>
														</div>
													</div>
												</c:otherwise>
											</c:choose>
										</div>
									</c:forEach>
								</c:when>
								<c:otherwise>
							Aucun but.
							</c:otherwise>
							</c:choose>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<a id="activateModalConfirmationArbitre" href="#" style="display: none;" data-reveal-id="myModalConfirmationArbitre"></a>
	<div id="myModalConfirmationArbitre" class="reveal-modal" data-reveal>
	  <div style="text-align: center;">
	  	Etes-vous sûr de vouloir affecter cet arbitre à ce match ?
	  	<br />
	  	<br />
	  	<a href="#" class="alert button small" onclick="closeModalConfirmationArbitre();">Non</a>
	  	<a href="#" class="success button small" onclick="confirmerChoixArbitre();">Oui</a>
	  </div>
	  <a id="closeModalConfirmationArbitre" class="close-reveal-modal">&#215;</a>
	</div>
	<a id="activateModalConfirmationLancementMatch" href="#" style="display: none;" data-reveal-id="myModalConfirmationLancementMatch"></a>
	<div id="myModalConfirmationLancementMatch" class="reveal-modal" data-reveal>
	  <div style="text-align: center;">
	  	Etes-vous sûr de vouloir démarrer ce match ?
	  	<br />
	  	<br />
	  	<a href="#" class="alert button small" onclick="closeModalConfirmationLancementMatch();">Non</a>
	  	<a href="#" class="success button small" onclick="confirmerLancementMatch();">Oui</a>
	  </div>
	  <a id="closeModalConfirmationLancementMatch" class="close-reveal-modal">&#215;</a>
	</div>
	<a id="activateModalArbitreNonPresent" href="#" style="display: none;" data-reveal-id="myModalArbitreNonPresent"></a>
	<div id="myModalArbitreNonPresent" class="reveal-modal" data-reveal>
	  <div style="text-align: center;">
	  	Vous devez choisir un arbitre avant de démarrer le match.
	  	<br />
	  	<br />
	  	<a href="#" class="alert button small" onclick="closeModalArbitreNonPresent();">Retour</a>
	  </div>
	  <a id="closeModalArbitreNonPresent" class="close-reveal-modal">&#215;</a>
	</div>
	<a id="activateModalConfirmationTerminerMatch" href="#" style="display: none;" data-reveal-id="myModalConfirmationTerminerMatch"></a>
	<div id="myModalConfirmationTerminerMatch" class="reveal-modal" data-reveal>
	  <div style="text-align: center;">
	  	<div id="divMatchTermineSansTirAuBut">
		  	Etes-vous sûr de vouloir terminer ce match ?
		  	<br />
		  	<br />
		  	<a href="#" class="alert button small" onclick="closeModalConfirmationTerminerMatch();">Non</a>
		  	<a href="#" class="success button small" onclick="confirmerTerminerMatch();">Oui</a>
	  	</div>
	  	<div id="divMatchTermineAvecTirAuBut">
	  		Vous ne pouvez pas terminer un match avec un score nul.
	  		Si une équipe a gagné aux tirs au but merci d'indiquer laquelle :
	  		<br />
	  		<br />
	  		<select id="ddlEquipeGagnanteTirsAuBut" style="width: 300px;">
	  			<option value="${match.getEquipe1().getIdEquipe() }">${match.getEquipe1().getNom()}</option>
	  			<option value="${match.getEquipe2().getIdEquipe() }">${match.getEquipe2().getNom()}</option>
	  		</select>
	  		<br />
	  		<br />
	  		<a href="#" class="alert button small" onclick="closeModalConfirmationTerminerMatch();">Retour</a>
		  	<a href="#" class="success button small" onclick="confirmerTerminerMatchTirsAuBut();">Confirmer</a>
	  	</div>
	  </div>
	  <a id="closeModalConfirmationTerminerMatch" class="close-reveal-modal">&#215;</a>
	</div>
	<a id="activateModalConfirmationAjoutBut" href="#" style="display: none;" data-reveal-id="myModalConfirmationAjoutBut"></a>
	<div id="myModalConfirmationAjoutBut" class="reveal-modal" data-reveal>
	  <div style="text-align: center;">
	  	Ajouter ce but ?
	  	<br />
	  	<br />
	  	<a href="#" class="alert button small" onclick="closeModalConfirmationAjoutBut();">Non</a>
	  	<a href="#" class="success button small" onclick="confirmerAjoutBut();">Oui</a>
	  </div>
	  <a id="closeModalConfirmationAjoutBut" class="close-reveal-modal">&#215;</a>
	</div>
	<a id="activateModalErreurAJoutBut" href="#" style="display: none;" data-reveal-id="myModalErreurAJoutBut"></a>
	<div id="myModalErreurAJoutBut" class="reveal-modal" data-reveal>
	  <div style="text-align: center;">
	  	<label id="lblErreurButJoueur">Vous devez renseigner un joueur.</label>
	  	<label id="lblErreurButMinute">Vous devez choisir une minute.</label>
	  	<label id="lblErreurButProlongation">Pour inscrire un but en prolongation il faut qu'il y ait égalité durant les 90 minutes réglementaires.</label>
	  	<br />
	  	<br />
	  	<a href="#" class="alert button small" onclick="closeModalErreurAJoutBut();">Retour</a>
	  </div>
	  <a id="closeModalErreurAJoutBut" class="close-reveal-modal">&#215;</a>
	</div>
	<a id="activateModalConfirmationRetraitBut" href="#" style="display: none;" data-reveal-id="myModalConfirmationRetraitBut"></a>
	<div id="myModalConfirmationRetraitBut" class="reveal-modal" data-reveal>
	  <input type="hidden" id="hiddenIdBut"></input>	
	  <div style="text-align: center;">
	  	Retirer ce but ?
	  	<br />
	  	<br />
	  	<a href="#" class="alert button small" onclick="closeModalConfirmationRetraitBut();">Non</a>
	  	<a href="#" class="success button small" onclick="confirmerRetraitBut();">Oui</a>
	  </div>
	  <a id="closeModalConfirmationRetraitBut" class="close-reveal-modal">&#215;</a>
	</div>
	<script>
		document.write('<script src='
				+ ('__proto__' in {} ? 'js/vendor/zepto'
						: 'js/vendor/jquery') + '.js><\/script>');
	</script>
	<script src="js/foundation.min.js"></script>
	<script src="js/foundation/foundation.section.js"></script>
	<script>
		$(document).foundation();

		// Partie choix arbitre
		function closeModalConfirmationArbitre() {
			document.getElementById("ddlArbitres").selectedIndex = 0;
			$("#closeModalConfirmationArbitre").click();
		}
		function confirmerChoixArbitre() {
			var idArbitre = document.getElementById("ddlArbitres").value;
			if (idArbitre != '') {
					window.location = "administration?action=affectationArbitreMatch&idArbitre="
							+ idArbitre + "&idMatch=" + ${match.getIdMatch()};
 			}
		}
		function ddlArbitreChange() {
			$("#activateModalConfirmationArbitre").click();		
		}
		
		// Partie lancement match
		function closeModalConfirmationLancementMatch() {
			$("#closeModalConfirmationLancementMatch").click();
		}
		function confirmerLancementMatch() {
			window.location = "administration?action=demarrerMatch&id=" + ${match.getIdMatch()};
		}
		function closeModalArbitreNonPresent() {
			$("#closeModalArbitreNonPresent").click();
		}
 		function lancerMatch(idMatch) {
 			var arbitrePresent = ${match.getArbitre() != null};
 			if (arbitrePresent == true)
			{
 				$("#activateModalConfirmationLancementMatch").click();
 			}
 			else {
 				$("#activateModalArbitreNonPresent").click();
 			}
 		}
 		
 		// Partie terminer match
 		function closeModalConfirmationTerminerMatch()
 		{
 			$("#closeModalConfirmationTerminerMatch").click();
 		}
 		function confirmerTerminerMatch()
 		{
 			window.location = "administration?action=terminerMatch&id=" + ${match.getIdMatch()};
 		}
 		function terminerMatch(idMatch) {
 			var tirsAuButs = ${ match.nbButEquipe1() == match.nbButEquipe2()};
 			document.getElementById("divMatchTermineAvecTirAuBut").style.display = 'none';
 			document.getElementById("divMatchTermineSansTirAuBut").style.display = 'none';
 			if (tirsAuButs == false)
			{
 				document.getElementById("divMatchTermineSansTirAuBut").style.display = '';
 			}
 			else
			{
 				document.getElementById("divMatchTermineAvecTirAuBut").style.display = '';
			}
 			$("#activateModalConfirmationTerminerMatch").click();
 		}
 		function confirmerTerminerMatchTirsAuBut()
 		{
 			var idEquipeGagnante = document.getElementById("ddlEquipeGagnanteTirsAuBut").value;
 			window.location = "administration?action=terminerMatchTirsAuBut&idMatch=" + ${match.getIdMatch()} + "&idEquipeGagnante=" + idEquipeGagnante;
 		}
 		
 		// Partie ajout but
 		function closeModalConfirmationAjoutBut()
 		{
 			$("#closeModalConfirmationAjoutBut").click();
 		}
 		function closeModalErreurAJoutBut()
 		{
 			$("#closeModalErreurAJoutBut").click();
 		}
 		function confirmerAjoutBut()
 		{
 			var equipe = document.getElementById("ddlChoixEquipeBut");
 			var idJoueur = '';
 			if (equipe.options[equipe.selectedIndex].value == "1") {
 				idJoueur = document.getElementById("ddlChoixJoueurEquipe1But").value;
 			} else if (equipe.options[equipe.selectedIndex].value == "2") {
 				idJoueur = document.getElementById("ddlChoixJoueurEquipe2But").value;
 			}
 			var minute = document.getElementById("ddlChoixMinuteBut").value;
 			window.location = "administration?action=ajouterButMatch&idJoueur=" 
					+ idJoueur + "&minute=" + minute + "&idMatch=" + ${match.getIdMatch()};
 		}
 		function ajouterBut() {
 			document.getElementById("lblErreurButJoueur").style.display = 'none';
 			document.getElementById("lblErreurButMinute").style.display = 'none';
 			document.getElementById("lblErreurButProlongation").style.display = 'none';
 			var prolongpossible = ${ match.prolongationPossible()};
 			var equipe = document.getElementById("ddlChoixEquipeBut");
 			var idJoueur = '';
 			if (equipe != null && equipe.options[equipe.selectedIndex].value == "1") {
 				idJoueur = document.getElementById("ddlChoixJoueurEquipe1But").value;
 			} else if (equipe != null && equipe.options[equipe.selectedIndex].value == "2") {
 				idJoueur = document.getElementById("ddlChoixJoueurEquipe2But").value;
 			}
 			var minute = document.getElementById("ddlChoixMinuteBut").value;
 			if (idJoueur == '') {
 				document.getElementById("lblErreurButJoueur").style.display = '';
 				$("#activateModalErreurAJoutBut").click();
 			}
 			else if (minute == '') {
 				document.getElementById("lblErreurButMinute").style.display = '';
 				$("#activateModalErreurAJoutBut").click();
 			}
 			else if (parseInt(minute) > 90 &&  prolongpossible == false)
 			{
 				document.getElementById("lblErreurButProlongation").style.display = '';
 				$("#activateModalErreurAJoutBut").click();
 			}
 			else {
 				$("#activateModalConfirmationAjoutBut").click();
 			}
 		}
 		
 		// Partie retrait but
 		function closeModalConfirmationRetraitBut()
 		{
 			$("#closeModalConfirmationRetraitBut").click();
 		}
 		function retirerBut(idBut) {
 			document.getElementById("hiddenIdBut").value = idBut;
 			$("#activateModalConfirmationRetraitBut").click();
 		}
 		function confirmerRetraitBut()
 		{
 			var idBut = document.getElementById("hiddenIdBut").value;
 			window.location = "administration?action=retirerButMatch&&idMatch=" + ${match.getIdMatch()} + "&idBut=" + idBut;
 		}
 		
 		function ddlChoixEquipeButChange() {
 			var equipe1 = document.getElementById("ddlChoixJoueurEquipe1But");
 			var equipe2 = document.getElementById("ddlChoixJoueurEquipe2But");
 			if (equipe1 != null)
 				equipe1.style.display = 'none';
 			if (equipe2 != null)
 				equipe2.style.display = 'none';
 			var select = document.getElementById("ddlChoixEquipeBut");
 			if (select != null) {
 				if (select.options[select.selectedIndex].value == "1")
 				{
	 				if (equipe1 != null){
	 					equipe1.style.display = '';
	 				}
 				} else if (select.options[select.selectedIndex].value == "2") {
 					
	 				if (equipe2 != null){
	 					equipe2.style.display = '';
	 				}
 				}
 			}
 		}
	</script>
</body>
</html>